<!-- Dom模板 -->
<template>
  <div>
    <ul class="BA_cont">
      <!-- <li>{{$store.state.bags.bagData[0].bookname}}</li> -->
      <li
        v-for="(item, index) in bookList"
        :key="index"
        class="BA_ulItem"
        @click="liClick(item)"
      >
        <!-- <div><img src="../../../static/img/v2_qsk67k.png" /></div> -->
        <div><img :src="item.book_img_url" /></div>
        <div>{{ item.bookname }}</div>
        <div>{{item.diversity || 1}}集/10集</div>
      </li>
    </ul>
      <!-- <van-empty v-if="bookList.length===0" image="error" description="快去寻找适合你的书吧" /> -->
      <div v-if="bookList.length === 0" class="kong">
        <p class="iconfont icon-shoutidai">?</p>
        <p>快去寻找适合你的书吧</p>
      </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  data() {
    return {
      msg: "测试",
      bookList: [],
      // weidengluBook:[],
      flag:sessionStorage.getItem('userId'),
      // navList:['全部','收藏','','','',''],
      datalist: [
        {
          title: "宿主她又在崩剧情",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "他的小祖宗甜爆了",
          readed: 102,
          allRead: 789,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "爱过你",
          readed: 8,
          allRead: 562,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "我在旧时光里守候你",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "太子妃黑化了",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "重生之异能狂妃",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "本富腿毛一尺长",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "宿主她又在崩剧情",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
        {
          title: "宿主她又在崩剧情",
          readed: 3,
          allRead: 246,
          img: "../../../static/img/v2_qsk67k.png",
        },
      ],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    if (!sessionStorage.getItem("token")) {
      // Toast({
      //   message: "请先登录账号",
      //   position: "bottom",
      // });
      this.$store.dispatch("bags/getBookData").then((res)=>{
        this.$store.state.bags.bagData.forEach((item,index)=>{
          if(item.money<=0){
            this.bookList.push(item)
          }
        })
      })

    } else {
      this.$store.dispatch("bags/getBookData");
      this.$store
        .dispatch("bags/getUserMsg", {
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          console.log(res, "书本返回数据");
          // this.$store.state.bags.evaluationData.forEach((item, index) => {
          //   let findIndex = this.bookList.findIndex((item1, index1) => {
          //     return item.bookid === item1.bookid;
          //   });
          //   if (findIndex === -1) {
          //     this.bookList.push(item);
          //   }
          // });
          
          this.$store.state.bags.subscriptionData.forEach((item, index) => {
            let findIndex = this.bookList.findIndex((item1, index1) => {
              return item.bookid === item1.bookid;
            });
            if (findIndex === -1) {
              this.bookList.push(item);
            }
          });

          // this.$store.state.bags.shoucangData.forEach((item, index) => {
          //   let findIndex = this.bookList.findIndex((item1, index1) => {
          //     return item.bookid === item1.bookid;
          //   });
          //   if (findIndex === -1) {
          //     this.bookList.push(item);
          //   }
          // });
          this.$store.state.bags.dowloadData.forEach((item, index) => {
            let findIndex = this.bookList.findIndex((item1, index1) => {
              return item.bookid === item1.bookid;
            });
            if (findIndex === -1) {
              this.bookList.push(item);
            }
          });
          this.$store.getters["login/history"].forEach((item, index) => {
            let findIndex = this.bookList.findIndex((item1, index1) => {
              return item.bookid === item1.bookid;
            });
            if (findIndex === -1) {
              this.bookList.push(item);
            }else{
              // this.bookList.push
              console.log(item);
              this.bookList[findIndex].diversity=item.diversity
              this.bookList[findIndex].diversityid=item.diversityid
            }
          });
          console.log(this.bookList);
        });
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // this.getData().then(res=>{
    // })
    // this.getData().catch(res=>{
    // })
    // setTimeout(() => {
    // }, 200);
  },
  // Vue方法定义
  methods: {
    // getData() {
    // },
    liClick(item) {
      this.$store
        .dispatch("bags/getCatalogData", { bookid: item.bookid })
        .then((res) => {});
      // this.$store.dispatch("bags/bookItem", item);
      // setTimeout(() => {
      this.$router.history.push({
        path: "/details",
        query: {
          path: this.$route.path,
        },
      });
      // });
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  /* width: 50%;
  height: 6.666667rem;
  line-height: 1.333333rem;
  margin-left: 25%;
  margin-top: 2.666667rem; */
  top: 50%;
  left: 50%;
  margin-top: -0.933333rem;
  margin-left: -2.133333rem;
  position: absolute;
}
.kong p:nth-child(1) {
  width: 1.333333rem;
  height: 1.333333rem;
  border-radius: 50%;
  font-size: 0.933333rem;
  transform: rotate(-30deg);
  padding-left: 1.6rem;
}
.kong p:nth-child(2) {
  font-size: 0.426667rem;
  font-family: PingFangSC-regular;
}
.BA_ulItem {
  /* width: 2.48rem; */
  width: calc(100vw / 3.2);
  margin-bottom: 0.4rem;
}
.BA_ulItem > div:nth-child(1) {
  text-align: center;
  height: 3.2rem;
}
.BA_ulItem > div:nth-child(1) img {
  width: 2.48rem;
  height: 3.2rem;
  border-radius: 0.133333rem;
}
.BA_ulItem > div:nth-child(2) {
  width: 2.373333rem;
  margin: 0.213333rem auto 0;
  text-align: left;
  /* margin-top: ; */
  font-size: 0.346667rem;
  font-family: PingFangSC-bold;
  font-weight: 600;
  height: 0.986667rem;
  color: #5c5c5c;
}
.BA_ulItem > div:nth-child(3) {
  /* padding-left:.4rem; */
  /* width: 2.133333rem; */
  width: 2.373333rem;
  margin: 0.08rem auto 0;
  color: #999999;
  font-size: 0.266667rem;
  /* margin-top: 0.08rem; */
  font-family: PingFangSC-regular;
}

.BA_cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.533333rem 0.31rem 1.333333rem;
  overflow-y: auto;
  height: calc(100vh - 6.1244rem);
  position: relative;
  /* justify-content: space-between; */
}
</style>